import * as echarts from "echarts";

// 卡片数据
export const cardData = {
    config: {
        // 卡片样式
        cardStyle: {
            padding: "20px",
            borderRadius: "6px",
            background: "linear-gradient( 180deg, rgba(23,55,67,0.25) 0%, rgba(21,45,54,0.67) 100%)"
        },
        // 布局配置
        colLayout: {
            // xl: 4,
            // lg: 4,
            // md: 4,
            // sm: 4,
            // xs: 4
            span: 8
        },
        data: [
            {
                cardId: 1,
                title: "性别",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddress2", // 接口地址
                    style: {
                        height: 260
                    }, // 卡片主体样式
                    config: {
                        tooltip: {
                            trigger: "item",
                        },
                        legend: {
                            orient: "vertical",
                            right: "15%",
                            top: "middle",
                            itemHeight: 6,
                            itemWidth: 7,
                            textStyle: {
                                fontSize: 8,
                                rich: {
                                    color0: { color: '#2e5bff' },
                                    color1: { color: '#8c54ff' },
                                    color2: { color: '#ABEB41' },
                                    color3: { color: '#487CFF' }
                                }
                            },
                            formatter: (name) => {
                                const source = cardData.config.data[0].cardBodyConfig.config.dataset.source;
                                const index = source.findIndex(i => i.name === name);
                                const item = source[index];
                                if (item) {
                                    // 颜色样式名和索引对应
                                    const styleName = `color${index}`;
                                    return `{${styleName}|${name}  ${item.value}  ${item.percentage}%}`;
                                }
                                return name;
                            }
                        },
                        dataset: {
                            dimensions: ["name", "value", "percentage"],
                            source: [
                                { name: "男", value: 10, percentage: 10 },
                                { name: "女", value: 20, percentage: 20 }
                            ]
                        },
                        series: [
                            {
                                type: "pie",
                                encode: {
                                    itemName: "name",
                                    value: "value"
                                },
                                color: ['#2e5bff', '#8c54ff', '#ABEB41', '#487CFF'],
                                center: ['25%', '50%'],
                                radius: ['45%', '65%'],
                                label: {
                                    show: false
                                }
                            }
                        ],
                    }, // 卡片配置
                }
            },
            {
                cardId: 2,
                title: "年龄",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddress2", // 接口地址
                    style: {
                        height: 260
                    }, // 卡片主体样式
                    config: {
                        grid: {
                            left: '0%',
                            right: '0%',
                            bottom: '5%',
                            top: '10%',
                            containLabel: true
                        },
                        dataZoom: [
                            {
                                show: true,
                                type: "inside",
                                endValue: 5,
                                xAxisIndex: [0, 1],  // 注意顺序，0 是主要的 xAxis
                            },
                        ],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        dataset: {
                            dimensions: ['city', 'value'], // 明确字段名和顺序
                            source: [
                                { city: '测试市1', value: 1000 },
                                { city: '测试市2', value: 888 },
                                { city: '测试市3', value: 884 },
                                { city: '测试市4', value: 600 }
                            ]
                        },
                        xAxis: [{
                            type: 'category',
                            axisTick: {
                                show: false, // 隐藏 x 轴刻度线
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(6, 156, 162, 0.34)'
                                }
                            },
                            axisLabel: {
                                show: true,
                                color: '#BCCBCC',
                                fontSize: 8,
                                fontWeight: 400
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    width: 1,
                                    color: "rgba(6, 156, 162, 0.14)"
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                color: '#BCCBCC',
                                fontSize: 10,
                                fontWeight: 400
                            }
                        }],
                        series: [
                            {
                                type: 'bar',
                                barWidth: 9,
                                label: {
                                    show: true,
                                    position: "top",
                                    color: "#BCCBCC",
                                    fontSize: 8,
                                    fontWeight: 400
                                },
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1, [
                                        { offset: 0, color: "rgba(125, 150, 47, 1)" },
                                        { offset: 1, color: "rgba(13, 30, 41, 0)" }]
                                    ),
                                    borderRadius: [2, 2, 0, 0]
                                },
                                encode: {
                                    x: 'city',    // x 轴映射 city 字段
                                    y: 'value'    // y 轴映射 value 字段
                                }
                            }
                        ],
                    }, // 卡片配置
                }
            },
            {
                cardId: 3,
                title: "过夜游与一日游占比",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [ // 卡片筛选项
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddress2", // 接口地址
                    style: {
                        height: 260
                    }, // 卡片主体样式
                    config: {
                        tooltip: {
                            trigger: "item",
                        },
                        legend: {
                            orient: "vertical",
                            right: "15%",
                            top: "middle",
                            itemHeight: 6,
                            itemWidth: 7,
                            textStyle: {
                                fontSize: 8,
                                rich: {
                                    color0: { color: '#D06132' },
                                    color1: { color: '#33B586' },
                                    color2: { color: '#ABEB41' },
                                    color3: { color: '#487CFF' }
                                }
                            },
                            formatter: (name) => {
                                const source = cardData.config.data[2].cardBodyConfig.config.dataset.source;
                                const index = source.findIndex(i => i.name === name);
                                const item = source[index];
                                if (item) {
                                    // 颜色样式名和索引对应
                                    const styleName = `color${index}`;
                                    return `{${styleName}|${name}  ${item.value}  ${item.percentage}%}`;
                                }
                                return name;
                            }
                        },
                        dataset: {
                            dimensions: ["name", "value", "percentage"],
                            source: [
                                { name: "测试1", value: 10, percentage: 10 },
                                { name: "测试2", value: 20, percentage: 20 },
                                { name: "测试3", value: 70, percentage: 70 },
                                { name: "测试4", value: 50, percentage: 50 },
                            ]
                        },
                        series: [
                            {
                                type: "pie",
                                encode: {
                                    itemName: "name",
                                    value: "value"
                                },
                                color: ['#D06132', '#33B586', '#ABEB41', '#487CFF'],
                                center: ['25%', '50%'],
                                radius: ['45%', '65%'],
                                label: {
                                    show: false
                                }
                            }
                        ],
                    }, // 卡片配置
                }
            },
            {
                cardId: 4,
                title: "出行方式",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [ // 卡片筛选项
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddress2", // 接口地址
                    style: {
                        height: 260
                    }, // 卡片主体样式
                    config: {
                        tooltip: {
                            trigger: "item",
                        },
                        legend: {
                            orient: "vertical",
                            right: "15%",
                            top: "middle",
                            itemHeight: 6,
                            itemWidth: 7,
                            textStyle: {
                                fontSize: 8,
                                rich: {
                                    color0: { color: '#4E7CD8' },
                                    color1: { color: '#4EBC92' },
                                    color2: { color: '#FFAF3D' },
                                    color3: { color: '#FF5F12' }
                                }
                            },
                            formatter: (name) => {
                                const source = cardData.config.data[3].cardBodyConfig.config.dataset.source;
                                const index = source.findIndex(i => i.name === name);
                                const item = source[index];
                                if (item) {
                                    // 颜色样式名和索引对应
                                    const styleName = `color${index}`;
                                    return `{${styleName}|${name}  ${item.value}  ${item.percentage}%}`;
                                }
                                return name;
                            }
                        },
                        dataset: {
                            dimensions: ["name", "value", "percentage"],
                            source: [
                                { name: "测试1", value: 10, percentage: 10 },
                                { name: "测试2", value: 20, percentage: 20 },
                                { name: "测试3", value: 70, percentage: 70 },
                                { name: "测试4", value: 50, percentage: 50 },
                            ]
                        },
                        series: [
                            {
                                type: "pie",
                                encode: {
                                    itemName: "name",
                                    value: "value"
                                },
                                color: ['#4E7CD8', '#4EBC92', '#FFAF3D', '#FF5F12', '#C2DCD5', '#9D6B0A'],
                                center: ['25%', '50%'],
                                radius: ['45%', '65%'],
                                label: {
                                    show: false
                                }
                            }
                        ],
                    }, // 卡片配置
                }
            },
            {
                cardId: 2,
                title: "景区驻留时长",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddress2", // 接口地址
                    style: {
                        height: 260
                    }, // 卡片主体样式
                    config: {
                        grid: {
                            left: '0%',
                            right: '0%',
                            bottom: '5%',
                            top: '10%',
                            containLabel: true
                        },
                        dataZoom: [
                            {
                                show: true,
                                type: "inside",
                                endValue: 5,
                                xAxisIndex: [0, 1],  // 注意顺序，0 是主要的 xAxis
                            },
                        ],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        dataset: {
                            dimensions: ['city', 'value'], // 明确字段名和顺序
                            source: [
                                { city: '测试市1', value: 1000 },
                                { city: '测试市2', value: 888 },
                                { city: '测试市3', value: 884 },
                                { city: '测试市4', value: 600 }
                            ]
                        },
                        xAxis: [{
                            type: 'category',
                            axisTick: {
                                show: false, // 隐藏 x 轴刻度线
                            },
                            axisLine: {
                                lineStyle: {
                                    color: 'rgba(6, 156, 162, 0.34)'
                                }
                            },
                            axisLabel: {
                                show: true,
                                color: '#BCCBCC',
                                fontSize: 8,
                                fontWeight: 400
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    width: 1,
                                    color: "rgba(6, 156, 162, 0.14)"
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                color: '#BCCBCC',
                                fontSize: 10,
                                fontWeight: 400
                            }
                        }],
                        series: [
                            {
                                type: 'bar',
                                barWidth: 9,
                                label: {
                                    show: true,
                                    position: "top",
                                    color: "#BCCBCC",
                                    fontSize: 8,
                                    fontWeight: 400
                                },
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1, [
                                        { offset: 0, color: "rgba(47, 134, 150, 1)" },
                                        { offset: 1, color: "rgba(13, 30, 41, 0)" }]
                                    ),
                                    borderRadius: [2, 2, 0, 0]
                                },
                                encode: {
                                    x: 'city',    // x 轴映射 city 字段
                                    y: 'value'    // y 轴映射 value 字段
                                }
                            }
                        ],
                    }, // 卡片配置
                }
            },
            {
                cardId: 6,
                title: "过夜游占比",
                showSectionCondition: "download,enlarge",
                cardFilterOptions: [ // 卡片筛选项
                ],
                cardBodyConfig: {
                    type: "echart", // 类型 echart/table
                    url: "/cardBodyAddress2", // 接口地址
                    style: {
                        height: 260
                    }, // 卡片主体样式
                    config: {
                        tooltip: {
                            trigger: "item",
                        },
                        legend: {
                            orient: "vertical",
                            right: "15%",
                            top: "middle",
                            itemHeight: 6,
                            itemWidth: 7,
                            textStyle: {
                                fontSize: 8,
                                rich: {
                                    color0: { color: '#0149B3' },
                                    color1: { color: '#BF48E3' },
                                    color2: { color: '#036916' },
                                    color3: { color: '#00DFFF' }
                                }
                            },
                            formatter: (name) => {
                                const source = cardData.config.data[5].cardBodyConfig.config.dataset.source;
                                const index = source.findIndex(i => i.name === name);
                                const item = source[index];
                                if (item) {
                                    // 颜色样式名和索引对应
                                    const styleName = `color${index}`;
                                    return `{${styleName}|${name}  ${item.value}  ${item.percentage}%}`;
                                }
                                return name;
                            }
                        },
                        dataset: {
                            dimensions: ["name", "value", "percentage"],
                            source: [
                                { name: "测试1", value: 10, percentage: 10 },
                                { name: "测试2", value: 20, percentage: 20 },
                                { name: "测试3", value: 70, percentage: 70 },
                                { name: "测试4", value: 50, percentage: 50 },
                            ]
                        },
                        series: [
                            {
                                type: "pie",
                                encode: {
                                    itemName: "name",
                                    value: "value"
                                },
                                color: ['#0149B3', '#BF48E3', '#036916', '#00DFFF'],
                                center: ['25%', '50%'],
                                radius: ['45%', '65%'],
                                label: {
                                    show: false
                                }
                            }
                        ],
                    }, // 卡片配置
                }
            },
        ]
    }
}